<template>
  <div class="view-switcher">
    <div class="view-tabs">
      <button 
        v-for="view in views" 
        :key="view.id"
        :class="{ active: currentView === view.id }"
        @click="switchView(view.id)"
      >
        {{ view.name }}
      </button>
    </div>
    
    <!-- 列表视图 -->
    <div v-if="currentView === 'list'">
      <slot name="list"></slot>
    </div>
    
    <!-- 日历视图 -->
    <div v-else-if="currentView === 'calendar'">
      <CalendarView :todos="todos" @todo-clicked="$emit('todo-clicked', $event)" />
    </div>
    
    <!-- 看板视图 -->
    <div v-else-if="currentView === 'kanban'">
      <KanbanView :todos="todos" @todo-clicked="$emit('todo-clicked', $event)" />
    </div>
  </div>
</template>

<script>
import CalendarView from './CalendarView.vue'
import KanbanView from './KanbanView.vue'

export default {
  name: 'ViewSwitcher',
  components: {
    CalendarView,
    KanbanView
  },
  props: {
    todos: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      currentView: 'list',
      views: [
        { id: 'list', name: '列表视图' },
        { id: 'calendar', name: '日历视图' },
        { id: 'kanban', name: '看板视图' }
      ]
    }
  },
  methods: {
    switchView(viewId) {
      this.currentView = viewId
      this.$emit('view-changed', viewId)
    }
  }
}
</script>

<style scoped>
.view-switcher {
  margin-bottom: 20px;
}

.view-tabs {
  display: flex;
  gap: 5px;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.view-tabs button {
  padding: 10px 20px;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  cursor: pointer;
  transition: all 0.3s;
  font-weight: 500;
}

.view-tabs button.active,
.view-tabs button:hover {
  background-color: #3498db;
  color: white;
  border-color: #3498db;
}

@media (max-width: 768px) {
  .view-tabs {
    flex-wrap: wrap;
  }
  
  .view-tabs button {
    flex: 1;
    min-width: 30%;
  }
}
/* 夜间模式样式 */
.dark-mode .view-tabs button {
  background-color: #424242;
  color: #e0e0e0;
  border-color: #555;
}

.dark-mode .view-tabs button.active,
.dark-mode .view-tabs button:hover {
  background-color: #1976d2;
  border-color: #1976d2;
}

</style>